<dstore-center-title>
  <span title i18n>My donations</span>
  <div class="amount_count" subtitle *ngIf="amount$ | async as amount_count">
    <ng-container i18n
      >Total <span>{{ amount_count }}</span></ng-container
    >
  </div>
  <button routerLink="/my/comments" routerLinkActive="active">
    <ng-container i18n>My comments</ng-container>
  </button>
  <button routerLink="/my/donates" routerLinkActive="active">
    <ng-container i18n>My donations</ng-container>
  </button>
</dstore-center-title>
<div class="donate-list" dstoreResize (resize)="listHeight$.next($event.height)">
  <ng-template #loading>
    <div class="loadingContainer"><app-wait></app-wait></div>
  </ng-template>
  <ng-container *ngIf="donates$ | async as donates">
    <ng-container *ngIf="loaded; else loading">
      <div class="donate-item" *ngFor="let donate of donates">
        <ng-container *ngIf="donate.soft as soft; else deleted">
          <img class="icon" dstoreCover="icon" [src]="soft.info.icon" [routerLink]="['/app', soft.name]" />
          <div class="info">
            <span>{{ soft.info.name }}</span>
            <span *ngIf="!soft.package" class="subtitle" i18n>Removed</span>
          </div>
        </ng-container>
        <ng-template #deleted>
          <img class="icon" dstoreCover="icon" dstoreCover="icon" [routerLink]="['/app', donate.appName]" />
          <div class="info">
            <span>{{ donate.appName }}</span>
            <span class="subtitle" i18n>Removed</span>
          </div>
        </ng-template>
        <div class="time">
          <span i18n>Donation Date:</span> &nbsp;
          {{ donate.created_at | date: 'yyyy.MM.dd' }}
        </div>
        <div class="source" [ngSwitch]="donate.source">
          <ng-container *ngSwitchCase="Payment.AliPay" i18n>AliPay</ng-container>
          <ng-container *ngSwitchCase="Payment.WeChat" i18n>WeChat</ng-container>
          <ng-container *ngSwitchCase="Payment.PayPal" i18n>PayPal</ng-container>
        </div>
        <div class="amount">
          <span>{{ donate.currency === '' ? '￥' : '$' }}</span>
          <span>{{ donate.amount / 100 }}</span>
        </div>
      </div>
    </ng-container>
  </ng-container>
</div>
<div class="paginatorContainer">
  <app-paginator
    [length]="length$ | async"
    [size]="pageSize$ | async"
    (pageIndexChange)="gotoPage($event)"
  ></app-paginator>
</div>
